<template>
	<div style="position: relative;">

		<div class="top">
			<div class="top2"></div>
		</div>
		<div class="wrapper">
			<div v-if="!wechatLogin">
				<div>
					<div class="title">Hi,欢迎登录</div>
					<div class="desc">
						请登录您的专属账号
					</div>
				</div>
				<div style="position: relative;">
					<div>
						<u-input :custom-style="inputStyle" :placeholder-style="placeholderStyle"
							placeholder="请输入手机号 (11位)" class="mobile" focus v-model="mobile" type="number"
							maxlength="11" />
						<u-input :custom-style="inputStyle" class="mobile" v-model="code" type="number"
							:placeholder-style="placeholderStyle" placeholder="请输入验证码 (6位)" maxlength="6"
							:clearable="false" />
						<div :class="!enableFetchCode ? 'disable' : 'fetch'" @click="fetchCode" class="getcodediv"
							v-show="current == 0">
							获取验证码
						</div>
					</div>
					<!-- 输入验证码 -->
					<div class="box-code" v-show="current != 0"
						style="position: absolute;bottom: 0;right: 0;line-height: 50px;margin-top: 0;">
						<div>
							<u-verification-code change-text="验证码已发送（x）" end-text="重新获取验证码" unique-key="page-login"
								:seconds="seconds" @end="end" @start="start" ref="uCode" @change="codeChange">
							</u-verification-code>
							<span @tap="fetchCode" :style="{ color: codeColor }">
								{{ tips }}</span>
						</div>
					</div>
				</div>

				<div class="loginBtn" @click="submit" :class="canLogin ? '' : 'cannotLogin'">登录</div>

				<div class="flex">
					<u-checkbox-group :icon-size="24" width="45rpx">
						<u-checkbox shape="circle" v-model="enablePrivacy" active-color="#FF5E00"></u-checkbox>
					</u-checkbox-group>
					<div class="tips">
						未注册的手机号验证后将自动创建用户账号，登录即代表您已同意<span @click="navigateToPrivacy('PRIVACY_POLICY')">《隐私协议》</span>
						<span @click="navigateToPrivacy('USER_AGREEMENT')">
							《用户协议》
						</span>
					</div>
				</div>


				<!-- 循环出当前可使用的第三方登录模式 -->
				<div class="flex login-list">
					<div v-if="item.code" :style="{ background: item.color }" class="login-item"
						v-for="(item, index) in loginList" :key="index">
						<u-icon v-if="item.title != 'APPLE'" color="#fff" size="42" :name="item.icon"
							@click="navigateLogin(item)">
						</u-icon>
						<u-image v-else src="/static/appleidButton@2x.png" :lazy-load="false"
							@click="navigateLogin(item)" width="80" height="80" />
					</div>
				</div>

			</div>
			<view v-else>
				<wechatH5Login />
			</view>
		</div>
	</div>
</template>

<script>
	import {
		openIdLogin,
		loginCallback
	} from "@/api/connect.js";
	import api from "@/config/api.js";
	import {
		sendMobile,
		mobileLogin,
		userLogin
	} from "@/api/login";
	import uuid from "@/utils/uuid.modified.js"; // uuid
	import verifyCode from "@/components/verify-code/verify-code";
	import {
		getUserInfo
	} from "@/api/members";
	import {
		whetherNavigate
	} from "@/utils/Foundation"; //登录跳转
	import storage from "@/utils/storage.js"; //缓存
	import wechatH5Login from "./wechatH5Login.vue";
	import {
		webConnect
	} from "@/api/connect.js";
	import {
		md5
	} from "@/utils/md5.js";

	export default {
		components: {
			verifyCode,
			wechatH5Login
		},

		data() {
			return {
				uuid,
				wechatLogin: false, //是否加载微信公众号登录
				codeFlag: true, //验证开关，用于是否展示验证码
				tips: "",
				enableUserPwdBox: false, //帐号密码登录
				current: 0,
				codeColor: "#999", //按钮验证码颜色
				lightColor: this.$lightColor,
				seconds: 60, //默认验证码等待时间
				userData: {
					username: "",
					password: "",
				},
				showBack: false,
				enableFetchCode: false,
				enableUserBtnColor: false,
				enablePrivacy: false, //隐私政策
				mobile: "", //手机号
				code: "", //验证码
				inputStyle: {
					height: "104rpx",
					"border-bottom": "1rpx solid #D8D8D8",
					"letter-spacing": "1rpx",
					"font-size": "40rpx",
					"line-height": "40rpx",
					color: "#333",
				},
				placeholderStyle: "font-size: 29rpx;line-height: 32rpx;color: #999999;",
				loginList: [
					//第三方登录集合
					{
						icon: "weixin-fill",
						color: "#00a327",
						title: "微信",
						code: "WECHAT",
					}
				],
			};
		},
		onShow() {

			// 只要是app登录的全部清除内容
			// #ifdef APP-PLUS
			storage.setAccessToken("");
			storage.setRefreshToken("");
			storage.setUserInfo({});
			// #endif


			//#ifdef H5
			let isWXBrowser = /micromessenger/i.test(navigator.userAgent);
			if (isWXBrowser) {
				webConnect("WECHAT").then((res) => {
					let data = res.data;
					if (data.success) {
						window.location = data.result;
					}
				});
			}
			//#endif
		},
		computed: {
			canLogin() {
				return this.mobile != "" && this.code != ""
			}
		},
		mounted() {

			// #ifndef APP-PLUS
			//判断是否微信浏览器
			var ua = window.navigator.userAgent.toLowerCase();
			if (ua.match(/MicroMessenger/i) == "micromessenger") {
				this.wechatLogin = true;
				return;
			}
			// #endif
			/**
			 * 条件编译判断当前客户端类型
			 */
			//#ifdef H5
			this.clientType = "H5";
			//#endif

			//#ifdef APP-PLUS
			this.clientType = "APP";
			/**如果是app 加载支持的登录方式*/
			let _this = this;
			uni.getProvider({
				service: "oauth",
				success: (result) => {
					_this.loginList = result.provider.map((value) => {

						console.log(value)
						//展示title
						let title = "";
						//系统code
						let code = "";
						//颜色
						let color = "#8b8b8b";
						//图标
						let icon = "";
						//uni 联合登录 code
						let appcode = "";
						switch (value) {
							case "weixin":
								icon = "weixin-circle-fill";
								color = "#00a327";
								title = "微信";
								code = "WECHAT";
								break;
						}
						return {
							title: title,
							code: code,
							color: color,
							icon: icon,
							appcode: value,
						};
					});
				},
				fail: (error) => {
					uni.showToast({
						title: "获取登录通道失败" + error,
						duration: 2000,
						icon: "none",
					});
				},
			});
			//#endif

			//特殊平台，登录方式需要过滤
			// #ifdef H5
			this.methodFilter(["WECHAT"]);
			// #endif

			//微信小程序，只支持微信登录
			// #ifdef MP-WEIXIN
			this.methodFilter(["WECHAT"]);
			// #endif
		},
		watch: {
			current(val) {
				val ? (this.showBack = true) : (this.showBack = false);
			},
			userData: {
				handler(val) {
					if (this.userData.username && this.userData.password) {
						this.enableUserBtnColor = true;
					} else {
						this.enableUserBtnColor = false;
					}
				},
				deep: true,

			},
			mobile: {
				handler(val) {
					if (val.length == 11) {
						this.enableFetchCode = true;
					}
				},
			},

		},
		onLoad(options) {
			if (options && options.state) {
				this.stateLogin(options.state);
			}
		},
		methods: {
			//联合信息返回登录
			stateLogin(state) {
				loginCallback(state).then((res) => {
					let data = res.data;
					if (data.success) {
						storage.setAccessToken(data.result.accessToken);
						storage.setRefreshToken(data.result.refreshToken);
						// 登录成功
						uni.showToast({
							title: "登录成功!",
							icon: "none",
						});
						getUserInfo().then((user) => {
							storage.setUserInfo(user.data.result);
							storage.setHasLogin(true);
						});
						getCurrentPages().length > 1 ?
							uni.navigateBack({
								delta: getCurrentPages().length - 2,
							}) :
							uni.switchTab({
								url: "/pages/tabbar/home/index",
							});
					}
				});
			},
			/** 根据参数显示登录模块 */
			methodFilter(code) {
				let way = [];
				this.loginList.forEach((item) => {
					if (code.length != 0) {
						code.forEach((val) => {
							if (item.code == val) {
								way.push(item);
							}
						});
					} else {
						uni.showToast({
							title: "配置有误请联系管理员",
							duration: 2000,
							icon: "none",
						});
					}
				});
				this.loginList = way;
			},
			//非h5 获取openid
			async nonH5OpenId(item) {
				let _this = this;
				//获取各个openid
				await uni.login({
					provider: item.appcode,
					// #ifdef MP-ALIPAY
					scopes: "auth_user", //支付宝小程序需设置授权类型
					// #endif
					success: function(res) {
						uni.setStorageSync("type", item.code);
						//微信小程序意外的其它方式直接在storage中写入openid
						// #ifndef MP-WEIXIN
						uni.setStorageSync("openid", res.authResult.openid);
						res.authResult.unionId && uni.setStorageSync("unionId", res.authResult.unionId);
						// #endif
					},
					fail(e) {
						uni.showToast({
							title: "第三方登录暂不可用！",
							icon: "none",
							duration: 3000,
						});
					},
					complete(e) {
						//获取用户信息
						uni.getUserInfo({
							provider: item.appcode,
							success: function(infoRes) {
								//写入用户信息
								uni.setStorageSync("nickname", infoRes.userInfo.nickName);
								uni.setStorageSync("avatar", infoRes.userInfo.avatarUrl);
								uni.setStorageSync("unionId", infoRes.userInfo.unionId || infoRes
									.userInfo.unionid);

								// #ifdef MP-WEIXIN
								//微信小程序获取openid 需要特殊处理 如需获取openid请参考uni-id: https://uniapp.dcloud.net.cn/uniCloud/uni-id
								_this.weixinMPOpenID(res).then((res) => {
									//这里需要先行获得openid，再使用openid登录，小程序登录需要两步，所以这里特殊编译
									_this.goOpenidLogin("WECHAT_MP");
								});
								// #endif

								// #ifndef MP-WEIXIN
								_this.goOpenidLogin("APP");
								//#endif
							},
						});
					},
				});
			},
			//openid 登录
			goOpenidLogin(clientType) {
				// 获取准备好的参数，进行登录系统
				let params = {
					uuid: uni.getStorageSync("openid"), //联合登陆id
					source: uni.getStorageSync("type"), //联合登陆类型
					nickname: uni.getStorageSync("nickname"), // 昵称
					username: uni.getStorageSync("openid"), // 昵称
					avatar: uni.getStorageSync("avatar"), // 头像
					uniAccessToken: uni.getStorageSync("uni_access_token"), //第三方token
					type: this.clientType,
					token: {
						unionId: "",
						openId: uni.getStorageSync("openid")
					}
				};
				uni.getStorageSync("unionId") ? (params.token.unionId = uni.getStorageSync("unionId")) : delete params
					.token;

				openIdLogin(params, clientType).then((res) => {
					if (!res.data.success) {
						let errormessage = "第三方登录暂不可用";
						uni.showToast({
							// title: '未绑定第三方账号',
							title: errormessage,
							icon: "none",
							duration: 3000,
						});
						return;
					} else {
						storage.setAccessToken(res.data.result.accessToken);
						storage.setRefreshToken(res.data.result.refreshToken);
						// 登录成功
						uni.showToast({
							title: "第三方登录成功!",
							icon: "none",
						});
						// 执行登录
						getUserInfo().then((user) => {
							if (user.data.success) {
								/**
								 * 个人信息存储到缓存userInfo中
								 */
								storage.setUserInfo(user.data.result);
								storage.setHasLogin(true);
								uni.switchTab({
									url: "/pages/tabbar/home/index",
								});
								/**
								 * 计算出当前router路径
								 * 1.如果跳转的链接为登录页面或跳转的链接为空页面。则会重新跳转到首页
								 * 2.都不满足返回跳转页面
								 */
								if (user.data.result.mobile) {
									whetherNavigate();
								} else {
									uni.navigateTo({
										url: "/pages/passport/bindUserPhone",
									});
								}
							} else {
								uni.switchTab({
									url: "/pages/tabbar/home/index",
								});
							}
						});
					}
				});
			},
			//微信小程序获取openid
			async weixinMPOpenID(res) {
				await miniProgramLogin(res.code).then((res) => {
					uni.setStorageSync("openid", res.data);
				});
			},
			/**跳转到登录页面 */
			navigateLogin(connectLogin) {

				// console.log(connectLogin)

				// return
				// #ifdef H5
				let code = connectLogin.code;
				let buyer = api.buyer;
				window.open(
					buyer + `/passport/connect/connect/login/web/` + code,
					"_self"
				);
				// #endif
				// #ifdef APP-PLUS
				this.nonH5OpenId(connectLogin);
				// #endif
			},

			// 提交
			submit() {


				if (this.mobile == "" || this.code == "") return
				storage.setHasLogin(false);
				storage.setUserInfo({});
				uni.showLoading({
					
				})
				mobileLogin({
					mobile: this.mobile,
					code: this.code
				}).then(
					(res) => {
						this.getUserInfoMethods(res);
					}
				);
			},
			getUserInfoMethods(res) {
				if (res.code == '000000') {
					getUserInfo({
						id: res.data.userId
					}).then((user) => {
						if (user.code == '000000') {
							storage.setUserInfo({...user.data});
							storage.setHasLogin(true);
							
							uni.showToast({
								title: "登录成功!",
								icon: "none",
							});
							whetherNavigate();
						} else {
							uni.switchTab({
								url: "/pages/tabbar/home/index",
							});
						}
					});
				}else{
					uni.showToast({
						title: "登录失败",
						icon: "none",
					});
				}
			},

			navigateToPrivacy(val) {
				uni.navigateTo({
					url: "/pages/mine/help/tips?type=" + val,
				});
			},

			start() {
				this.codeColor = "#999";
				this.$u.toast("验证码已发送");
				this.codeFlag = false;

			},
			/**点击验证码*/
			codeChange(text) {
				this.tips = text;
			},
			/** 结束验证码后执行 */
			end() {
				this.codeColor = this.lightColor;
				this.codeFlag = true;
			},

			passwordLogin() {
				if (!this.enablePrivacy) {
					uni.showToast({
						title: "请同意用户隐私",
						duration: 2000,
						icon: "none",
					});
					return false;
				}

				if (!this.userData.username) {
					uni.showToast({
						title: "请填写用户名",
						duration: 2000,
						icon: "none",
					});
					return false;
				}

				if (!this.userData.password) {
					uni.showToast({
						title: "请填写密码",
						duration: 2000,
						icon: "none",
					});
					return false;
				}


			},

			// 提交用户登录
			async submitUserLogin() {
				const params = JSON.parse(JSON.stringify(this.userData));
				params.password = md5(params.password);
				try {
					let res = await userLogin(params, this.clientType);
					if (res.data.success) {
						this.getUserInfoMethods(res);
					}
				} catch (error) {

				}
			},

			// 发送验证码
			async fetchCode() {
				if (!this.enablePrivacy) {
					uni.showToast({
						title: "请同意用户隐私",
						duration: 2000,
						icon: "none",
					});
					return false;
				}

				if (!this.$u.test.mobile(this.mobile)) {
					uni.showToast({
						title: "请填写正确手机号",
						duration: 2000,
						icon: "none",
					});
					return false;
				}

				if (this.$refs.uCode.canGetCode) {
					// 向后端请求验证码
					uni.showLoading({});
					let res = await sendMobile({
						mobile: this.mobile
					});
					if (this.$store.state.isShowToast) {
						uni.hideLoading()
					};
					this.current = 1;
					this.$refs.uCode.start();

				} else {
					!this.enableUserPwdBox ? this.$u.toast("请倒计时结束后再发送") : "";
				}

			},
		},
	};
</script>
<style>
	page {
		background: #fff;
	}
</style>
<style lang="scss" scoped>
	.wrapper {
		padding: 0 80rpx;
	}

	.top {
		width: 100%;
		height: 339rpx;
		background: url("../../static/newImg/bg1.png") no-repeat;
		background-size: 100% 100%;
	}

	.top2 {
		width: 100%;
		height: 100%;
		background: url("../../static/newImg/bg2.png") no-repeat;
		background-size: 100% 100%;
	}

	.title {
		padding-top: calc(60rpx);
		font-style: normal;
		line-height: 1;
		font-weight: bold;
		font-size: 44rpx;
		color: #252B46;
	}

	.box-code {
		margin-top: 78rpx;
	}

	.desc,
	.desc-light {
		font-size: 32rpx;
		line-height: 32rpx;
		color: #333333;
		margin-top: 40rpx;
	}

	.desc {
		font-weight: 500;
		color: #979BA6;
		font-size: 25rpx;
		margin-top: 22rpx;
		margin-bottom: 80rpx
	}

	.desc-light {
		color: #999999;

		>span {
			color: #333;
			margin-left: 8rpx;
		}
	}

	.mobile {
		// margin-top: 80rpx;
	}

	.disable {
		// background: linear-gradient(90deg, #ffdcba 2.21%, #ffcfb2 99.86%);
		color: #999999;
	}

	.fetch {
		// background: linear-gradient(57.72deg, #ff8a19 18.14%, #ff5e00 98.44%);
		color: #28C649;
	}

	.btn {
		border-radius: 100px;
		width: 590rpx;
		margin-top: 97rpx;
		height: 80rpx;
		font-size: 30rpx;
		line-height: 80rpx;
		text-align: center;
		color: #ffffff;
	}

	.tips {
		font-size: 12px;
		line-height: 20px;
		margin-top: 32rpx;
		width: 546rpx;

		>span {
			color: $light-color;
		}
	}

	.fetch-btn {
		width: 370rpx;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		background: #f2f2f2;
		border-radius: 100rpx;
		font-size: 28rpx;
		color: #999;

		margin: 71rpx auto 0 auto;
	}

	.login-list {
		display: flex;
		width: 590rpx;
		position: absolute;
		top: 1200rpx;
		align-items: center;
		justify-content: center;
	}

	.login-item {
		width: 80rpx;
		border-radius: 10rpx;
		height: 80rpx;
		display: flex;
		justify-content: center;
		align-items: center;

		margin: 0 20rpx;
	}

	.user-password-tips {
		text-align: center;
		color: $main-color;
		margin: 20px 0;
	}

	.getcodediv {
		position: absolute;
		right: 0;
		bottom: 0;
		line-height: 50px;
	}

	.loginBtn {
		width: 100%;
		height: 90rpx;
		margin-top: 95rpx;
		border-radius: 45rpx;
		text-align: center;
		line-height: 90rpx;
		font-family: PingFang;
		font-weight: bold;
		font-size: 29rpx;
		color: #FFFFFF;

		background-color: rgb(40, 198, 73);
	}

	.cannotLogin {
		opacity: 0.4;
	}
</style>
